<template>
	<view>
		<div style="width: 100%;">
			<img :src="bg_img" width="100%" height="auto">		
		</div>
		<div class="center">
			<div class="center-mobile">
				<div class="input-mobile">
					<u--input placeholder="请输入您的手机号" border="none" v-model="value" @change="change" inputAlign="center"
						color="#d88589" fontSize="20" type="number" placeholder-style="color:#d88589"></u--input>
				</div>
				<div class="receive" @click="submit">下载{{name}}APP使用</div>
			</div>
		</div>
		<div class="text-center">
			
			<text>
				{{introduce}}
			</text>

		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				rules: {
					// 字段名称
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				pid: '',
				name: '',
				logo: '',
				h5: '',
				share_title: '',
				share_content: '',
				introduce:'',
				bg_img:''

			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			if (option.pid) {
				this.pid = option.pid
			}

		},
		onShow() {
			this.$http.post('api/index/shareConfig').then(res => {
				console.log("=========")
				console.log(res)
				const {
					name,
					logo,
					h5,
					share_title,
					share_content,
					introduce,
					bg_img
				} = res

				console.log("=========")
				this.bg_img = bg_img
				this.introduce =introduce
				this.name = name
				this.logo = logo
				this.share_title = share_title
				this.share_content = share_content
				uni.setNavigationBarTitle({
					title:name
				})
			})
		},
		methods: {
			change(e) {

			},
			submit() {
				if (!this.value || this.value.length != 11) {
					uni.showModal({
						title: '提示',
						content: '手机号输入错误！',
						showCancel: false,
						success: function(res) {}
					});
				} else {
					this.$http.post('api/user/login', {
							username: this.value,
							sms_code: 888888,
							type: 2,
							pid: this.pid
						})
						.then(res => {
							console.log("成功")
							uni.showModal({
								content:"22"
							})
							uni.showModal({
								title: '注册成功！',
								content: '感谢您的注册，点击确认即可下载APP体验服务',
								showCancel: false,
								success: () => {
									uni.navigateTo({
										url: "download/download"
									})
								}
							});
						})
				}

			}
		}
	}
</script>

<style>
	page {
		background: #ffeeef;
	}

	,
	img {
		vertical-align: bottom
	}

	.center {
		width: 100%;

	}

	.center-mobile {
		height: 350rpx;
		background: #FFFFFF;
		margin: 0 25rpx;
		border-radius: 30rpx;
		position: relative;
		display: flex;
		justify-content: center;

		line-height: 100rpx;
	}

	.input-mobile {
		background: #ffeeef;
		position: absolute;
		right: auto;
		width: 90%;
		top: 50rpx;
		border-radius: 50rpx;
		height: 100rpx;
		text-align: center;
		display: flex;
	}

	.receive {
		position: absolute;
		right: auto;
		width: 90%;
		top: 180rpx;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #fb9c53, #f86047);
		border-radius: 50rpx;
		height: 100rpx;
		text-align: center;
		display: flex;
		justify-content: center;
	}

	.text-center {
		color: #d88589;
		margin: 40rpx 30rpx;
		font-size: 26rpx;
	}
</style>
